<template>
  <!--  个人求助页面-->
  <div id="top">
    <div>
      <el-card id="search">
        <!--        <el-input v-model="titlename" placeholder="请输入标题名"></el-input>-->
        <el-input v-model="userinfo" placeholder="请输入发布者姓名"></el-input>
        <el-button type="primary" plain @click="doQury()">查询</el-button>
        <el-button type="danger" plain @click="doshenhe()">审核</el-button>
        <el-button type="danger" plain @click="dontPass()">查看未通过</el-button>
      </el-card>
    </div>
    <el-row>
      <el-table :data="currentPageData" stripe style="width:100%">
        <el-table-column prop="aid" label="求助ID" width="180"/>
        <el-table-column prop="atitle" label="标题" width="300"/>
        <el-table-column prop="user.uname" label="发布者" width="280"/>
        <el-table-column prop="aneedmoney" label="目标金额" width="220"/>
        <el-table-column prop="createdate" label="发布时间" width="450"/>
        <el-table-column fixed="right" label="操作" width="230">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="viewDetall(scope.row)" v-show="bangzhu">
              查看帮助者
            </el-button>
            <el-button link type="primary" size="small" v-show="shenhe" @click="viewLook(scope.row)">
              查看详情
            </el-button>
            <el-button link type="primary" size="small" v-show="shenhe" @click="viewPass(scope.row)">
              通过
            </el-button>
            <el-button link type="primary" size="small" v-show="shenhe" @click="viewDont(scope.row)">
              不通过
            </el-button>
            <div v-show="wtg">未通过</div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--  分页组件-->
    <el-pagination
        v-model="currentPage"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalData.length"
        @current-change="handleCurrentChange">
    </el-pagination>


  </div>
  <!--  查看-->
  <el-dialog
      v-model="dialogVisible"
      title="捐赠用户详情"
      width="30%"
      :before-close="handleClose">
    <table>
      <tr v-for="item in userList" :key="item.aoid">
        <td>姓名：</td>
        <td>{{ item.user.uname }}</td>
        <td>捐赠金额：</td>
        <td>{{ item.aomoney }}</td>
      </tr>
    </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <!--审核查看-->
  <el-dialog
      v-model="dialogVisibleshenhe"
      title="求助详情"
      width="40%"
      height="30%"
      :before-close="handleClose">
    <table style="width: 600px">
      <tr>
        <td style="height: 35px;width: 70px">标题：</td>
        <td>{{helps.atitle}}</td>
      </tr>

      <tr>
        <td style="height: 50px;width: 70px">副标题：</td>
        <td>{{helps.asubhead}}</td>
      </tr>

      <tr>
        <td style="height: 35px;width: 70px">内容：</td>
        <td>{{helps.adetail}}</td>
      </tr>
    </table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleshenhe=false">取消</el-button>
        <el-button type="primary" @click="dialogVisibleshenhe=false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>

import doThis from "@/api/getData";

export default {
  name: "HelpList",
  data() {
    return {
      helpList: [],
      userinfo: '',
      dialogVisible: false,
      dialogVisibleshenhe:false,
      userList: [],
      users: {},
      userListRow: [],
      aid: '',
      helps:{},
      shenhe:false,
      bangzhu:true,
      wtg:false,
      //  分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的条数
    }
  },
  mounted() {
    this.getHelpList()
    // this.getUserListRow()
  },
  computed: {
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const {totalData, currentPage, pageSize} = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      return totalData.slice(start, end);
    },
  },
  methods: {
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    },
    //查询全部
    getHelpList() {
      doThis.doGet("/assistance/ming", {astatus:2}).then(res => {
        console.log('res========', res)
        // this.helpList=res.data
        this.tableData = res.data
        this.totalData = res.data
      })
    },
    //搜索
    doQury() {
      doThis.doGet("/assistance/ming", {uname: this.userinfo,astatus:2}).then(res => {
        console.log('123-----------', res)
        // this.helpList=res.data
        this.wtg=false
        this.shenhe=false
        this.bangzhu=true
        this.tableData = res.data
        this.totalData = res.data
      })
    },
    //查看
    getUserList(aid) {
      doThis.doGet("/assisrder/list", {aid: aid}).then(res => {
        console.log("456======", res)
        this.userList = res.data
      })
    },
    viewDetall(row) {
      this.users = row
      this.getUserList(row.aid)
      this.dialogVisible = true
    },
    //审核页面
    doshenhe(){
        doThis.doGet("/assistance/ming",{astatus:1}).then(res =>{
          console.log("审核页面-----",res)
          this.wtg=false
          this.shenhe=true
          this.bangzhu=false
          this.tableData = res.data
          this.totalData = res.data
        })
    },
    //通过
    viewPass(row){
      if (confirm("确定要通过吗")){
        doThis.doGet("/assistance/update",{aid:row.aid,astatus:2}).then(res =>{
          console.log("通过----",res.data)
          // this.tableData = res.data
          // this.totalData = res.data
          this.getHelpList()
        })
      }
    },
    //不通过
    viewDont(row){
      if (confirm("确定要不通过吗")){
        doThis.doGet("/assistance/update",{aid:row.aid,astatus:6}).then(res =>{
          console.log("不通过----",res.data)
          // this.tableData = res.data
          // this.totalData = res.data
          this.getHelpList()
        })
      }
    },
    viewLook(row){
      this.helps=row
      // this.getHelpList(row.aid)
      this.dialogVisibleshenhe=true
    },
    //查看未通过
    dontPass(){
      doThis.doGet("/assistance/ming",{astatus:6}).then(res =>{
        console.log("审核页面-----",res)
        this.wtg=true
        this.shenhe=false
        this.bangzhu=false
        this.tableData = res.data
        this.totalData = res.data
      })
    }
  }
}
</script>

<style scoped>
#top {
  margin-top: 47px;
  margin-left: -30px;
  background-color: #EBEBEB;
}

#search .el-input {
  width: 200px;
  margin-left: 30px;
  margin-right: 30px;
}

#search .el-button {
  margin-left: 30px;
  margin-right: 30px;
}
</style>